<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<link rel="shortcut icon" href="./favicon.ico">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/register.css">
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
	<div class="wrapper">
		<!-- 顶部导航 -->
		<ul class="xtx_navs">
			<li>
				<a href="./login.html">请先登录</a>
			</li>
			<li>
				<a href="./register.html">免费注册</a>
			</li>
			<li>
				<a href="./center-order.html">我的订单</a>
			</li>
			<li>
				<a href="./center.html">会员中心</a>
			</li>
			<li>
				<a href="javascript:;">帮助中心</a>
			</li>
			<li>
				<a href="javascript:;">在线客服</a>
			</li>
			<li>
				<a href="javascript:;">
					<i class="mobile sprites"></i>
					手机版
				</a>
			</li>
		</ul>
	</div>
</div>
<!-- 头部 -->
<div class="xtx_header">
	<div class="wrapper">
		<!-- 网站Logo -->
		<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
		<!-- 主导航 -->
		<div class="xtx_navs">
			<ul class="clearfix">
				<li>
					<a href="./index.html">首页</a>
				</li>
				<li>
					<a href="./category01.html">生鲜</a>
				</li>
				<li>
					<a href="./category01.html">美食</a>
				</li>
				<li>
					<a href="./category01.html">餐厨</a>
				</li>
				<li>
					<a href="./category01.html">电器</a>
				</li>
				<li>
					<a href="./category01.html">居家</a>
				</li>
				<li>
					<a href="./category01.html">洗护</a>
				</li>
				<li>
					<a href="./category01.html">孕婴</a>
				</li>
				<li>
					<a href="./category01.html">服装</a>
				</li>
			</ul>
		</div>
		<!-- 站内搜索 -->
		<div class="xtx_search clearfix">
			<!-- 购物车 -->
			<a href="./cart-none.html" class="xtx_search_cart sprites">
				<i>2</i>
			</a>
			<!-- 搜索框 -->
			<div class="xtx_search_wrapper">
				<input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
			</div>
		</div>
	</div>
</div>
<div class="xtx-wrapper">
	<div class="container">
		<!-- 卡片 -->
		<div class="xtx-card">
			<h3>新用户注册</h3>
			<form class="xtx-form">
				<div data-prop="username" class="xtx-form-item">
					<span class="iconfont icon-zhanghao"></span>
					<input name="username" type="text" placeholder="设置用户名称">
					<span class="msg"></span>
				</div>
				<div data-prop="phone" class="xtx-form-item">
					<span class="iconfont icon-shouji"></span>
					<input name="phone" type="text" placeholder="输入手机号码  ">
					<span class="msg"></span>
				</div>
				<div data-prop="code" class="xtx-form-item">
					<span class="iconfont icon-zhibiaozhushibiaozhu"></span>
					<input name="code" type="text" placeholder="短信验证码">
					<span class="msg"></span>
					<a class="code" href="javascript:;">发送验证码</a>
				</div>
				<div data-prop="password" class="xtx-form-item">
					<span class="iconfont icon-suo"></span>
					<input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
					<span class="msg"></span>
				</div>
				<div data-prop="confirm" class="xtx-form-item">
					<span class="iconfont icon-suo"></span>
					<input name="confirm" type="password" placeholder="请再次输入上面密码">
					<span class="msg"></span>
				</div>
				<div class="xtx-form-item pl50">
					<i class="iconfont icon-queren"></i>
					已阅读并同意<i>《用户服务协议》</i>
				</div>
				<div class="xtx-form-item">
					<button class="submit">下一步</button>
					<!-- <a class="submit" href="javascript:;">下一步</a> -->
				</div>
			</form>
		</div>
	</div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
	<div class="wrapper">
		<!-- 联系我们 -->
		<div class="contact clearfix">
			<dl>
				<dt>客户服务</dt>
				<dd class="chat">在线客服</dd>
				<dd class="feedback">问题反馈</dd>
			</dl>
			<dl>
				<dt>关注我们</dt>
				<dd class="weixin">公众号</dd>
				<dd class="weibo">微博</dd>
			</dl>
			<dl>
				<dt>下载APP</dt>
				<dd class="qrcode">
					<img src="./uploads/qrcode.jpg">
				</dd>
				<dd class="download">
					<span>扫描二维码</span>
					<span>立马下载APP</span>
					<a href="javascript:;">下载页面</a>
				</dd>
			</dl>
			<dl>
				<dt>服务热线</dt>
				<dd class="hotline">
					400-0000-000
					<small>周一至周日 8:00-18:00</small>
				</dd>
			</dl>
		</div>
	</div>
	<!-- 其它 -->
	<div class="extra">
		<div class="wrapper">
			<!-- 口号 -->
			<div class="slogan">
				<a href="javascript:;" class="price">价格亲民</a>
				<a href="javascript:;" class="express">物流快捷</a>
				<a href="javascript:;" class="quality">品质新鲜</a>
			</div>
			<!-- 版权信息 -->
			<div class="copyright">
				<p>
					<a href="javascript:;">关于我们</a>
					<a href="javascript:;">帮助中心</a>
					<a href="javascript:;">售后服务</a>
					<a href="javascript:;">配送与验收</a>
					<a href="javascript:;">商务合作</a>
					<a href="javascript:;">搜索推荐</a>
					<a href="javascript:;">友情链接</a>
				</p>
				<p>CopyRight &copy; 小兔鲜儿</p>
			</div>
		</div>
	</div>
</div>
<script>

    // 验证码 倒计时功能
    const code = document.querySelector('.code')
    let time = 6
    let flag = true


    code.addEventListener('click', function () {
        if (flag) {
            flag = false
            const timeId = setInterval(function () {
                time--
                code.innerHTML = `${time}s后重新获取`
                // console.log(time)
                if (time === 0) {

                    clearInterval(timeId)
                    code.innerHTML = '重新获取'
                    time = 6
                    flag = true
                }
            }, 1000)
        }
    })


    // 用户名称 正则表达式
    const userName = document.querySelector('[name=username]')
    const reg1 = /^[a-z\dA-Z-_]{6,10}$/

    userName.addEventListener('blur', function () {

        if (userName.value !== '') {
            if (reg1.test(this.value)) {
                this.nextElementSibling.className = 'right'
                this.nextElementSibling.innerHTML = '没毛病呢'
            } else {
                this.nextElementSibling.className = 'error'
                this.nextElementSibling.innerHTML = '请输入6-10位只包含a-z，1-9，A-Z，-和_字符的用户名'
            }
        }
    })

    // 手机号 正则表达式
    const phone = document.querySelector('[name=phone]')
    const reg2 = /^\d{11}$/

    phone.addEventListener('blur', function () {
        if (this.value !== '') {
            if (reg2.test(this.value)) {
                this.nextElementSibling.className = 'right'
                this.nextElementSibling.innerHTML = '没毛病呢'
            } else {
                this.nextElementSibling.className = 'error'
                this.nextElementSibling.innerHTML = '请输入正确格式的手机号'
            }
        }
    })

    // 密码 正则表达式
    const passwds = document.querySelectorAll('[type=password]')
    const reg3 = /^[a-z0-9A-Z]{6,20}$/

    for (let i = 0; i < passwds.length; i++) {
        passwds[i].addEventListener('blur', function () {
            if (this.value !== '') {
                if (reg3.test(this.value)) {
                    this.nextElementSibling.className = 'right'
                    this.nextElementSibling.innerHTML = '没毛病呢'
                } else {
                    this.nextElementSibling.className = 'error'
                    this.nextElementSibling.innerHTML = '请输入6-20位密码'
                }
            }
        })
    }
</script>
</body>

</html>